<!--
 * @Author: 凉月 1931226988@qq.com
 * @Date: 2023-08-23 09:33:53
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-08-24 14:04:29
 * @FilePath: \v3_xmly\src\views\search\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="search">
    <div class="search_top">
      <van-search
        class="search_top_search"
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        action-text="取消"
        show-action
        @cancel="goHome"
        @update:model-value="changeNow"
        @search="goSearchDetail"
      />
      <!-- <div class="search_top_cancellation">取消</div> -->
    </div>
    
    <div class="search_history" v-if="historyInfo && !value">
      <div class="search_history_top">
        <div class="search_history_top_title">搜索历史</div>
        <svg
          t="1692786591116"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5170"
          width="18"
          height="18"
          @click="removeLocalStorage"
        >
          <path
            d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z"
            fill="#515151"
            p-id="5171"
          ></path>
          <path
            d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z"
            fill="#515151"
            p-id="5172"
          ></path>
        </svg>
      </div>

      <div class="search_history_center clearFix">
        <div
          class="search_history_center_item"
          v-for="(item, index) in historyInfo"
          :key="index"
          @click="goSearchDetail(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    
    <HeaderScroll
      v-if="!value"
      :data="data"
      @changeIndex="changeIndex"
    ></HeaderScroll>

    <div class="search_center" v-if="!value">
      <div
        class="search_center_item"
        v-for="(item, index) in CategoryArrInfo"
        :key="item.tgt_id"
        @click="goSearchDetail(item.word)"
      >
        <div
          :class="{
            search_center_index: true,
            No1: index === 0,
            No2: index === 1,
            No3: index === 2,
          }"
        >
          {{ index + 1 }}
        </div>
        <div class="search_center_text">
          {{ item.word }}
          <div class="search_center_text_icon">
            <svg
              t="1692788458542"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6353"
              width="12"
              height="12"
              v-if="item.shift == 1"
            >
              <path
                d="M887.68 460L512 84.16 136.32 460 272 595.68l144-144V928h192V451.68l144 144 135.68-135.68z"
                fill="#E44A3B"
                p-id="6354"
              ></path>
            </svg>
            <svg
              v-else-if="item.shift == -1"
              t="1692788622916"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7513"
              data-spm-anchor-id="a313x.search_index.0.i14.55b53a812XLsA9"
              width="12"
              height="12"
            >
              <path
                d="M136.24 552.24L512 928l375.76-375.76L752 416.464l-144 144V84.24H416v476.224l-144-144z"
                fill="#9DD159"
                p-id="7514"
              ></path>
            </svg>
            <svg
              v-else
              t="1692840592308"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10179"
              width="12"
              height="12"
            >
              <path d="M63.6 489.6h896.7v44.8H63.6z" p-id="10180"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="search_now" v-else>
      <div class="search_now_top">
        <img :src="keyWordInfo.result?.albumResultList[0]?.imgPath" alt="" />
        <div class="search_now_top_center">
          <div
            class="search_now_top_center_title"
            v-html="keyWordInfo.result?.albumResultList[0]?.highlightKeyword"
          ></div>
          <div class="search_now_top_center_bottom">
            <div class="search_now_top_center_bottom_tag">
              {{ keyWordInfo.result?.albumResultList[0]?.category }}
            </div>
            <svg
              t="1692838116482"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4137"
              width="12"
              height="12"
            >
              <path
                d="M194.021053 891.957895C80.842105 797.642105 13.473684 657.515789 13.473684 509.305263 13.473684 234.442105 237.136842 13.473684 512 13.473684s498.526316 220.968421 498.526316 495.831579c0 140.126316-59.284211 274.863158-164.378948 366.484211l-18.863157-18.863158c99.705263-88.926316 156.294737-215.578947 156.294736-347.621053 0-258.694737-212.884211-468.884211-471.578947-468.88421S40.421053 250.610526 40.421053 509.305263c0 140.126316 61.978947 272.168421 172.463158 361.094737l-18.863158 21.557895z"
                fill="#8a8a8a"
                p-id="4138"
              ></path>
              <path
                d="M293.726316 980.884211c-10.778947 0-18.863158 0-29.642105-2.694737-26.947368-8.084211-51.2-26.947368-67.368422-51.2l-72.757894-123.957895c-29.642105-51.2-13.473684-118.568421 40.421052-148.210526 51.2-29.642105 118.568421-13.473684 148.210527 40.421052l72.757894 123.957895c13.473684 24.252632 18.863158 53.894737 10.778948 83.536842s-26.947368 51.2-51.2 67.368421c-13.473684 5.389474-32.336842 10.778947-51.2 10.778948zM220.968421 665.6c-13.473684 0-26.947368 2.694737-40.421053 10.778947-40.421053 21.557895-53.894737 72.757895-29.642105 113.178948l72.757895 123.957894c10.778947 18.863158 29.642105 32.336842 51.2 37.726316 21.557895 5.389474 43.115789 2.694737 61.978947-8.08421 40.421053-21.557895 53.894737-72.757895 29.642106-113.178948l-72.757895-123.957894c-16.168421-24.252632-43.115789-40.421053-72.757895-40.421053zM741.052632 980.884211c-18.863158 0-37.726316-5.389474-53.894737-13.473685-51.2-29.642105-70.063158-97.010526-40.421053-148.210526l72.757895-123.957895c29.642105-51.2 97.010526-70.063158 148.210526-40.421052s70.063158 97.010526 40.421053 148.210526L835.368421 926.989474c-13.473684 24.252632-37.726316 43.115789-67.368421 51.2-8.084211 2.694737-18.863158 2.694737-26.947368 2.694737z m70.063157-315.284211c-29.642105 0-56.589474 13.473684-70.063157 40.421053l-72.757895 123.957894c-21.557895 40.421053-8.084211 88.926316 29.642105 113.178948 18.863158 10.778947 40.421053 13.473684 61.978947 8.08421 21.557895-5.389474 37.726316-18.863158 51.2-37.726316l72.757895-123.957894c21.557895-40.421053 8.084211-88.926316-29.642105-113.178948-13.473684-8.084211-26.947368-10.778947-43.11579-10.778947z"
                fill="#8a8a8a"
                p-id="4139"
              ></path>
            </svg>
            &nbsp; 7.88亿 &nbsp; &nbsp;
            <svg
              t="1692838188395"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5389"
              width="12"
              height="12"
            >
              <path
                d="M725.333333 298.666667v426.666666h-85.333333V298.666667h85.333333zM384 298.666667v426.666666H298.666667V298.666667h85.333333z m-170.666667 128v170.666666H128v-170.666666h85.333333z m682.666667 0v170.666666h-85.333333v-170.666666h85.333333z m-341.333333-256v682.666666h-85.333334V170.666667h85.333334z"
                fill="#8a8a8a"
                p-id="5390"
              ></path>
            </svg>
            &nbsp; {{ keyWordInfo.result?.albumResultList[0]?.tracks }}集
          </div>
        </div>
        <svg
          t="1692796229984"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8775"
          width="32"
          height="24"
        >
          <path
            d="M772.7 217.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z"
            fill="#4D4D4D"
            p-id="8776"
          ></path>
          <path
            d="M415.8 679.9c5.9 0 11.5-1.6 16.2-4.5l231.1-134.6c10.9-5.2 18.5-16.3 18.5-29.2 0-11.9-6.4-22.3-16-27.8L439.7 352.2c-5.8-6.7-14.4-10.9-23.9-10.9-17.6 0-31.8 14.4-31.8 32.1 0 0.6 0 1.2 0.1 1.8l-0.4 0.2 0.5 269c-0.1 1.1-0.2 2.2-0.2 3.4 0 17.7 14.3 32.1 31.8 32.1z"
            fill="#4D4D4D"
            p-id="8777"
          ></path>
          <path
            d="M909.8 306.6c-5.4-10.5-16.3-17.8-28.9-17.8-17.8 0-32.2 14.4-32.2 32.1 0 6 1.7 11.7 4.6 16.5l-0.1 0.1c26.9 52.4 42.1 111.8 42.1 174.7 0 211.6-171.6 383.2-383.2 383.2S128.8 723.8 128.8 512.2 300.4 129.1 512 129.1c62.5 0 121.5 15 173.6 41.5l0.2-0.4c4.6 2.6 10 4.1 15.7 4.1 17.8 0 32.2-14.4 32.2-32.1 0-13.1-7.9-24.4-19.3-29.4C653.6 81.9 584.9 64.5 512 64.5 264.7 64.5 64.3 265 64.3 512.2S264.7 959.9 512 959.9s447.7-200.4 447.7-447.7c0-74.1-18-144-49.9-205.6z"
            fill="#4D4D4D"
            p-id="8778"
          ></path>
        </svg>
      </div>
      <div
        class="search_now_item"
        v-for="(item, index) in keyWordInfo.result?.queryResultList"
        :key="index"
        v-html="item.highlightKeyword"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import HeaderScroll from "@/components/headerScroll/index.vue";
import {
  reqSearchCategory,
  reqSearchCategoryArr,
  reqSearchKwNwo,
} from "@/api/search/index";
import router from "@/router";
// 使用 defineOptions 函数来为组件命名
defineOptions({
  name: "Search",
});

// 搜索内容收集
const value = ref("");
// 分类数据收集
const data = ref<any>({
  arr: [],
});
// 分类id收集
const CategoryId = ref();
// 分类数据展示
const CategoryArrInfo = ref();
// 历史记录数据
const historyInfo = ref<any>([]);
// 关键词数据存储
const keyWordInfo = ref<any>({});

// 回调函数区域

// 获取页面分类
const getPageCategory = async () => {
  const res: any = await reqSearchCategory();
  data.value.arr.push(
    ...res.category.map((item: any) => {
      return {
        title: item.categoryName,
        id: item.categoryId,
      };
    })
  );
  console.log(res);
  // 获取分类中第一个id 赋值给CategoryId
  CategoryId.value = res.category[0].categoryId;
};

// 获取页面分类展示
const getPageCategoryArr = async () => {
  const res: any = await reqSearchCategoryArr(CategoryId.value , 20);
  console.log(res);
  CategoryArrInfo.value = res.hotWordResultList;
};

// 分类切换事件
const changeIndex = (index: number, id: number) => {
  CategoryId.value = id;
};

// 获取本地存储历史记录
const getLocalStorage = () => {
  historyInfo.value = JSON.parse(
    localStorage.getItem("XMLY_history") as string
  )?.reverse() || null;
};

// 添加本地存储历史记录
const pushLocalStorage = (title: string) => {
  getLocalStorage();
  // 获取已经有的
  const some = historyInfo.value || [];
  // 判断有没有重复
  const some2 = some.filter((item: string) => {
    if (item == title) {
      return false;
    } else {
      return true;
    }
  });
  // 添加进去新的
  some2.reverse().push(title);
  // 判断是否大于8个
  if (some2.length >= 10) {
    // 如果大于8个就删除第一个
    // console.log('执行了')
    some2.shift();
  }
  // 转换为json字符串添加进入
  localStorage.setItem("XMLY_history", JSON.stringify(some2));
};

// 删除本地存储历史记录
const removeLocalStorage = () => {
  historyInfo.value = null;
  localStorage.removeItem("XMLY_history");
};

// 前往搜索详情页
const goSearchDetail = (value: any) => {
  // 这里写跳转页面

  // 添加进入历史记录
  pushLocalStorage(value);
};

// 取消按钮回调
const goHome = () => {
  // 清空数据
  value.value = "";
  // 跳转到上一个页面
  // router.push({
  //   name: "Home",
  // });
  router.go(-1)
};

// 输入框发送变化获取试试数据
const changeNow = async (value: string) => {
  const res: any = await reqSearchKwNwo(value, false);
  if (res.ret === 200) {
    keyWordInfo.value = res.data;
  }
  console.log(res);
};

// 组合式api区域

onMounted(() => {
  getPageCategory();
  getLocalStorage();
});

watch(
  CategoryId,
  () => {
    getPageCategoryArr();
  },
  {
    // immediate:true
    deep: true,
  }
);
</script>

<style scoped lang="less">
.search {
  .clearFix::after {
    content: "";
    display: block;
    clear: both;
  }

  .search_top {
    display: flex;
    align-items: center;
    .search_top_search {
      flex: 8;
    }
    .search_top_cancellation {
      flex: 1;
      font-size: 16px;
      color: #333;
    }
  }

  .search_history {
    margin-bottom: 10px;
    .search_history_top {
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      .search_history_top_title {
        color: #333;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
    .search_history_center {
      padding: 0 10px;
      .search_history_center_item {
        margin: 5px 10px 0 0;
        float: left;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding: 5px 15px;
        background-color: #f3f4f5;
        border-radius: 4px;
      }
    }
  }

  /deep/.topBar_scroll_item {
    font-size: 14px !important;
  }

  .search_center {
    .search_center_item {
      padding: 0 0 0 27px;
      height: 45px;
      line-height: 45px;
      display: flex;
      .search_center_index {
        text-align: center;
        width: 20px;
        font-size: 16px;
        margin-right: 10px;
        color: #e3cdbc;
      }
      .search_center_index.No1 {
        font-size: 20px;
        color: #ff4949;
      }
      .search_center_index.No2 {
        font-size: 20px;
        color: #f86442;
      }
      .search_center_index.No3 {
        font-size: 20px;
        color: #f8a642;
      }
      .search_center_text {
        padding-right: 15px;
        flex: 1;
        color: #333;
        font-size: 16px;
        border-bottom: 1px solid #eee;
        .search_center_text_icon {
          float: right;
        }
      }
    }
  }

  .search_now {
    padding: 0 14px;
    .search_now_top {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #ccc;
      img {
        margin-right: 10px;
        width: 40px;
        height: 40px;
      }

      .search_now_top_center {
        .search_now_top_center_title {
          font-size: 14px;
          color: #333;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1; /* 设置显示行数 */
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
        .search_now_top_center_bottom {
          margin-top: 4px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #8a8a8a;
          .search_now_top_center_bottom_tag {
            // width: 90px;
            // height: 26px;
            border: 1px solid #8a8a8a;
            border-radius: 4px;
            padding: 0 4px;
            margin-right: 10px;
          }
        }
      }
    }

    .search_now_item {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
